#bcid-wrap{
    position:fixed;
    background:#000;
    display:none;
    text-align:center;
    z-index:100;
    top:0;
    left:0;
    width:100%;
    height:100%;
    #bcid{
        width:100%;
        height:80%;
    }
}
.top-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px;
    .searchBox {
        flex: 9;
        .mui-input-clear {
            border-radius: 20px;
            background: #f5f5f5;
            margin-bottom: 0;
        }
    }
    .mui-active:before {
        margin-top: -10px;
    }
    .mui-icon-camera {
        flex: 1;
        text-align: right;
        font-size: 30px;
    }
}

.banner-swiper {
    .swiper-wrapper {
        width: 100%;
        .swiper-slide {
            width: 100%;
            img {
                width: 100%;
            }
        }
    }
}

.news-container {
    display: flex;
    align-items: center;
    border-bottom: 10px solid #F4F4F4;
    .news-title {
        width: 1rem;
        height: 1rem;
        margin-left: .2rem;
        background: url(../images/toutiao.png) 50% no-repeat;
        background-size: 70%;
    }
    .news-warp {
        height: 1rem;
        width: 4rem;
        display: flex;
        align-items: center;
        .news-swiper {
            height: .8rem;
            width: 100%;
            .swiper-slide {
                font-size: .22rem;
                div {
                    height: .4rem;
                    line-height: .4rem;
                    span {
                        border: 1.104px solid rgb(230, 10, 31);
                        font-size: .18rem;
                        border-radius: .06rem;
                        color: rgb(230, 10, 31);
                        padding: 0 .1rem;
                        margin-right: .1rem;
                    }
                    p {
                        font-size: .2rem;
                        display: inline-block;
                        vertical-align: top;
                        width: 3rem;
                    }
                }
            }
        }
    }
    .news-images {
        width: 1.2rem;
        height: 1rem;
        position: relative;
        b {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../images/news-right-bg.png) 50% no-repeat;
            background-size: 1.2rem 1rem;
            z-index: 2;
        }
        img {
            width: 100%;
            height: 100%;
        }
    }
}

.swiper-pagination-bullet-active {
    background: #f5f5f5;
}

.nav-container {
    position: relative;
    overflow: hidden;
    top: -.16rem;
    z-index: 99;
    border-radius: 10px;
    box-shadow: 0 3px 6px #EBEBEA;
    background: url(../images/arcBg.png) center top no-repeat;
    background-size: 100%;
    ul {
        display: flex;
        margin-top: .16rem;
        li {
            flex: 1;
            display: flex;
            a {
                flex: 1;
                height: 1rem;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .nav-icon {
                    display: block;
                    width: .6rem;
                    height: .6rem;
                    background-size: 90%;
                    background-repeat: no-repeat;
                    background-position: 50% -50%;
                }
                .icon-lingshi {
                    background-image: url(../images/lingshi.png);
                }
                .icon-yinliao {
                    background-image: url(../images/yinliao.png);
                }
                .icon-shuiguo {
                    background-image: url(../images/shuiguo.png);
                }
                .icon-jinkou {
                    background-image: url(../images/jinkou.png);
                }
                .icon-xuegao {
                    background-image: url(../images/xuegao.png);
                }
                span {
                    display: block;
                    width: 100%;
                    height: .3rem;
                    line-height: .3rem;
                    text-align: center;
                    font-size: .22rem;
                    color: #333;
                    margin-top: -.1rem;
                }
            }
        }
    }
}

.content-container {
    .featured-wrap {
        display: flex;
        border-bottom: 1px solid #f5f3e6;
        &>div {
            height: 3rem;
            &.left-wrap {
                border-right: 1px solid #f5f3e6;
                position:relative;
                flex:1;
                a {
                    display: flex;
                    height: 100%;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-around;
                    img {
                        width: 2.2rem;
                        height: 2.2rem;
                    }
                }
                &:before {
                    content: 'TOP1';
                    display: inline-block;
                    position: absolute;
                    right:0;
                    top:0;
                    background: red;
                    z-index: 2;
                    width: .6rem;
                    height: .26rem;
                    line-height: .26rem;
                    text-align: center;
                    color: #fff;
                    font-size: .16rem;
                    border-radius: 0 0 .08rem .08rem;
                    font-style: normal;
                    background: -webkit-linear-gradient(90deg, #FF8801, #FF183D);
                    background: -o-linear-gradient(90deg, #FF8801, #FF183D);
                    background: -moz-linear-gradient(90deg, #FF8801, #FF183D);
                    background: linear-gradient(90deg, #FF8801, #FF183D);
                }
            }
            &.right-wrap {
                flex:1;
                display:flex;
                flex-direction:column;
                div{
                    flex:1;
                    position:relative;
                    &:before {
                        content: 'TOP2';
                        display: inline-block;
                        position: absolute;
                        right:0;
                        top:0;
                        background: red;
                        z-index: 2;
                        width: .6rem;
                        height: .26rem;
                        line-height: .26rem;
                        text-align: center;
                        color: #fff;
                        font-size: .16rem;
                        border-radius: 0 0 .08rem .08rem;
                        font-style: normal;
                        background: -webkit-linear-gradient(90deg, #FF8801, #FF183D);
                        background: -o-linear-gradient(90deg, #FF8801, #FF183D);
                        background: -moz-linear-gradient(90deg, #FF8801, #FF183D);
                        background: linear-gradient(90deg, #FF8801, #FF183D);
                    }
                    &+div{
                        border-top:1px solid #f5f3e6;
                        &:before {
                            content: 'TOP3';
                        }
                    }
                }
                a {
                    display: flex;
                    height:100%;
                    flex-direction:row-reverse;
                    align-items:center;
                    justify-content:space-between;
                    padding:0 .4rem;
                    img {
                        width: 1rem;
                        height: 1rem;
                    }
                }
            }
        }
    }
}